<template>
  <z-paging 
    ref="pagingRef" 
    v-model="dataList" 
    @query="queryList"
    :auto-show-system-loading="false"
  >
    <template #top>
      <wd-navbar 
        title="售后" 
        custom-class="navbar-custom" 
        :bordered="false" 
        safeAreaInsetTop
        left-arrow
        @click-left="goBack"
      ></wd-navbar>
    </template>

    <view class="px-[24rpx] box-border">
      <view 
        class="product-item rounded-[16rpx] mt-[24rpx] p-[24rpx] flex items-center box-border h-[144rpx]"
        v-for="item in dataList" 
        :key="item.id"
        @click="handleClick(item)"
      >
        <!-- 左侧：商品名称 -->
        <view class="product-name flex-shrink-0 mr-[24rpx]" style="width: 160rpx;">
          <text class="text-36rpx font-500 text-[#282828] break-words leading-40rpx text-shadow-[1px_0px_1px_rgba(0,0,0,0.2)]">{{ item.name }}</text>
        </view>
        
        <!-- 中间：商品图片 -->
        <view 
          class="product-image flex-shrink-0 mr-[24rpx] flex items-center justify-center"
          style="width: 124rpx; height: 132rpx;"
        >
          <image 
            :src="item.image" 
            mode="aspectFit"
            class="w-full h-full"
          />
        </view>
        
        <!-- 右侧：介绍文字 -->
        <view class="flex-1">
          <text class="text-[32rpx] c-[#282828] leading-[36rpx] text-shadow-[1px_0px_1px_rgba(0,0,0,0.2)]">{{ item.description }}</text>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { ref } from 'vue'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

defineOptions({
  name: 'AfterSales',
})

const pagingRef = ref(null)
const dataList = ref([])

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 查询列表数据
const queryList = (pageNo, pageSize) => {
  // TODO: 这里应该调用后端接口获取数据
  // 目前使用假数据模拟
  
  setTimeout(() => {
    const mockData = [
      { id: 2, name: '深海豚', image: '/static/product/2.png', description: '从激活日起开始，售后时间1年。' },
      { id: 3, name: 'FocusZEN', image: '/static/product/3.png', description: '从激活日起开始，售后时间1年。' },
      { id: 4, name: '专注欣', image: '/static/product/4.png', description: '从激活日起开始，售后时间1年。' },
      { id: 5, name: '开星果', image: '/static/product/5.png', description: '从激活日起开始，售后时间1年。' },
      { id: 6, name: '智能仿生手', image: '/static/product/6.png', description: '从激活日起开始，售后时间2年。' },
      { id: 7, name: '仿生灵巧手Revo1', image: '/static/product/6.png', description: '从激活日起开始，售后时间2年。' },
      { id: 8, name: '仿生灵巧手Revo2', image: '/static/product/6.png', description: '从激活日起开始，售后时间2年。' },
      { id: 9, name: 'Brain AI', image: '/static/product/9.png', description: '从激活日起开始，售后时间3年。' },
      { id: 10, name: '智能仿生腿', image: '/static/product/10.png', description: '从激活日起开始，售后时间3年。' },
    ]
    
    pagingRef.value?.complete(mockData)
  }, 500)
}

// 点击列表项
const handleClick = (item) => {
  console.log('点击了:', item)
}
</script>

<style>
page {
  background-color: #F1F1F1;
}
</style>

<style lang="scss" scoped>
.product-item {
  background-image: url('/static/images/bg10.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  
  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}
</style>
